<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getBuiltinTools, getCateroies } from '@/services/builtin-tools'
import { apiPrefix } from '@/config'
import moment from 'moment'

const loading = ref<boolean>(false)
const categories = reactive(Array<any>([]))
const providers = reactive(Array<any>([]))

onMounted(async () => {
  try {
    loading.value = true
    const toolResp = await getBuiltinTools()
    Object.assign(providers, toolResp.data)
  } finally {
    loading.value = false
  }
})

onMounted(async () => {
  const categoriesResp = await getCateroies()
  Object.assign(categories, categoriesResp.data)
})
</script>

<template>
  <a-spin :loading="loading" class="block h-full w-full">
    <div class="p-6 flex flex-col">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-2">
          <a-avatar :size="32" class="bg-blue-700">
            <icon-common :size="18" />
          </a-avatar>
          <div class="text-lg font-medium text-gray-900">插件广场</div>
        </div>
        <a-button type="primary" class="rounded-lg">创建自定义插件</a-button>
      </div>
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-2">
          <a-button class="rounded-lg !text-gray-700 px-3">全部</a-button>
          <a-button
            v-for="category in categories"
            type="text"
            class="rounded-lg !text-gray-700 px-3"
            :key="category.category"
            >{{ category.name }}</a-button
          >
        </div>
        <a-input-search
          placeholder="请输入插件名称"
          class="w-[240px] bg-white rounded-lg border-gray-300"
        ></a-input-search>
      </div>
      <a-row :gutter="[20, 20]" class="flex-1">
        <a-col :span="6" v-for="provider in providers" :key="provider.name" class="flex flex-col">
          <a-card hoverable class="cursor-pointer rounded-lg" :title="provider.name">
            <div class="flex items-center gap-3 mb-3">
              <a-avatar :size="40" shape="square" :style="{ backgroundColor: provider.background }">
                <img
                  :src="`${apiPrefix}/builtin-tool/${provider.name}/icon`"
                  :alt="provider.name"
                />
              </a-avatar>
              <div class="flex flex-col">
                <div class="text-base text-gray-900 font-bold">{{ provider.label }}</div>
                <div class="text-xs text-gray-500 line-clamp-1">
                  {{ provider.name }} · {{ provider.tools?.length }}
                </div>
              </div>
            </div>
            <div class="leading-[18px] text-gray-500 h-[72px] line-clamp-4 mb-8">
              {{ provider.description }}
            </div>
            <div class="flex items-center gap-1.5">
              <a-avatar :size="18" class="bg-blue-700">
                <icon-user />
              </a-avatar>
              <div class="text-xs text-gray-400">
                小帅 · 发布时间 {{ moment(provider.created_at).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="24" v-if="!providers.length" class="flex items-center justify-center">
          <a-empty
            description="没有可用的内置插件"
            class="h-[400px] flex flex-col items-center"
          ></a-empty>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<style scoped></style>
